new Vue({
  name: 'game',
  el: '#app',
  template: `<div id='#app' :class="cssClass">
    <top-bar :turn="turn" :players="players" :current-player-index="currentPlayerIndex"></top-bar>
    <div class="world">
      <div class="clouds">
        <cloud v-for="index in 10" :key="index" :type="(index - 1) % 5 + 1"></cloud>
      </div>
      <castle v-for="(player, index) in players" :player="player" :index="index"></castle>
      <div class="land"></div>
    </div>
    
    <transition name="hand">
      <hand :cards="currentHand" v-if="!activeOverlay" @card-play="handlePlayCard"
       @card-leave-end="handleCardLeaveEnd"></hand>
    </transition>

    <transition name="zoom">
      <overlay v-if="activeOverlay" :key="activeOverlay" @close="handleOverlayClose">
        <component :is="'overlay-content-' + activeOverlay" :player="currentPlayer"
        :opponent="currentOpponent" :players="players"></component>
      </overlay>
    </transition>

    <transition name="hand">
      <div class="overlay-background" v-if="activeOverlay"></div>
    </transition>
  </div>`,
  data: state,
  mounted() {
    beginGame()
  },
  computed: {
    testCard() {
      return cards.archers
    },
    cssClass() {
      return {
        'can-play': this.canPlay
      }
    }
  },
  methods: {
    handlePlay() {
      console.log('You played a card!')
    },

    handlePlayCard(card) {
      playCard(card)
    },

    handleCardLeaveEnd() {
      applyCard()
    },

    handleOverlayClose() {
      overlayCloseHandlers[this.activeOverlay]()
    }
  }
})

window.addEventListener('resize', () => {
  state.worldRatio = getWorldRatio()
})

// Tween.js
requestAnimationFrame(animate)

function animate(time) {
  requestAnimationFrame(animate);
  TWEEN.update(time)
}

function beginGame() {
  state.players.forEach(drawInitialHand)
  state.canPlay = true
}

function playCard(card) {
  if (state.canPlay) {
    state.canPlay = false
    currentPlayingCard = card

    // 将卡牌从玩家手牌中移除
    const index = state.currentPlayer.hand.indexOf(card)
    state.currentPlayer.hand.splice(index, 1)

    // 将卡牌放到弃牌堆中
    addCardToPile(state.discardPile, card.id)
  }
}

function applyCard() {
  const card = currentPlayingCard
  applyCardEffect(card)

  setTimeout(() => {
    // 检查玩家是否死亡
    state.players.forEach(checkPlayerLost)
    if (isOnePlayerDead()) {
      endGame()
    } else {
      nextTurn()
    }
  }, 700)
}

function nextTurn() {
  state.turn++
  state.currentPlayerIndex = state.currentOpponentId
  state.activeOverlay = 'player-turn'
}

function newTurn() {
  state.activeOverlay = null
  if (state.currentPlayer.skipTurn) {
    skipTurn()
  } else {
    startTurn()
  }
}

function skipTurn() {
  state.currentPlayer.skippedTurn = true
  state.currentPlayer.skipTurn = false
  nextTurn()
}

function startTurn() {
  state.currentPlayer.skippedTurn = false
  // 如果两名玩家都已经玩过一个回合
  if (state.turn > 2) {
    // 抽一张新的卡牌
    setTimeout(() => {
      state.currentPlayer.hand.push(drawCard())
      state.canPlay = true
    }, 800)
  } else {
    state.canPlay = true
  }
}

function endGame() {
  state.activeOverlay = 'game-over'
}

var overlayCloseHandlers = {
  'player-turn' () {
    if (state.turn > 1) {
      state.activeOverlay = 'last-play'
    } else {
      nextTurn()
    }
  },
  'last-play' () {
    newTurn()
  },
  'game-over' () {
    document.location.reload()
  }
}